<!-- eslint-disable vue/multi-word-component-names -->
<template>
<div >
    <h1>{{ username }}</h1>
    <!-- v-model双向绑定 会变化 -->
    <input type="text" v-model="username">
    <hr>
    <!-- :value单向绑定 不会随之变化 -->
    <input type="text" :value="username" @input="changeName">
</div>


</template>



<script>
export default{
    data(){
        return{
            username:'o1o1'
        }
    },
    methods:{
        changeName(event){
            this.username=event.target.value 
        }
    }
}

</script>


<style>

</style>